<!--
 * @Author       : xiangmin
 * @File         : element-table和分页封装，辣鸡element还需要自己封装
 * @Date         : 2023-06-15 22:05:51
 * @LastEditors  : xiangmin
 * @LastEditTime : 2023-11-24 10:48:33
-->
<template>
	<div element-loading-background="rgba(255, 255, 255, 0.7)">
		<el-table v-bind="$attrs">
			<el-table-column
				v-for="item in columns"
				v-bind="item"
				:key="item.prop"
			>
				<template
					v-if="item.headerSlot || item.renderHeader"
					#header="scope"
				>
					<component
						v-if="item.renderHeader"
						:is="item.renderHeader(scope.column)"
					></component>
					<slot
						v-else
						:name="item.headerSlot"
						:column="scope.column"
						:index="scope.$index"
					>
					</slot>
				</template>
				<template
					v-if="item.slot || item.render"
					#default="scope"
				>
					<component
						v-if="item.render"
						:is="item.render(scope.row)"
					></component>
					<slot
						v-else
						:name="item.slot"
						:row="scope.row"
						:column="scope.column"
						:index="scope.$index"
					>
					</slot>
				</template>
			</el-table-column>
			<template #empty>
				<slot name="empty"><el-empty :image-size="200" /></slot>
			</template>
			<template #append>
				<slot name="append"></slot>
			</template>
		</el-table>
		<div
			class="flex justify-end mt-15"
			v-show="!!pagination?.total"
		>
			<el-pagination
				v-if="pagination"
				v-bind="pagination"
			/>
		</div>
	</div>
</template>

<script setup lang="ts">
import type { PaginationProps } from '@/hooks/useElTable'

defineProps<{
	columns: TableColumns<any>[]
	pagination?: PaginationProps
}>()
</script>
